<% //    GWJ   yulian174 工单客户交互驱动执行日志%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title><s:message code="resource.mesmocustdriverlog" /></title>
	<!-- <link rel="stylesheet" href="mesMoCustDriverLog.css"> -->
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			background: #ffffff;
			height: 100vh;
			width: 100vw;
			overflow: hidden;
			/*cursor: none; */
		}
		header {
			background-color: #333;
			color: white;
			text-align: center;
			padding: 1rem 0;
		}
	
		nav ul {
			list-style: none;
			text-align: center;
		}
	
		nav ul li {
			display: inline-block;
			margin-right: 1em;
		}
	
		nav ul li a {
			color: white;
			text-decoration: none;
			padding: .5rem 1rem;
			transition: background-color 0.3s ease;
		}
	
		
		nav ul li a:hover {
			background-color: #ff7f50;
		}
	
		main section {
			min-height: 100vh;
			padding: 2rem;
			text-align: center;
		}
	
		footer {
			background-color: #333;
			color: white;
			text-align: center;
			padding: 1rem 0;
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	
		nav ul li a:hover {
			background-color: #50ff70bf;
			transform: scale(1.1);
			transition: background-color 0.5s ease, transform 0.5s ease;
		}
	
		@keyframes bgChange {
			0% {
				background-image: linear-gradient(to right, #333 0%, #444 100%);
			}
		
			50% {
				background-image: linear-gradient(to right, #ff7f50 0%, #ff6347 100%);
			}
		
			100% {
				background-image: linear-gradient(to right, #333 0%, #444 100%);
			}
		}
	
		/* 气泡 */
		.bubbles {
			position: relative;
			pointer-events: none;
		}
	
		.bubble {
			width: 32px;
			height: 32px;
			pointer-events: none;
			background: radial-gradient(circle, rgba(60, 236, 242, 0) 0%, rgba(252, 250, 136, 0.5) 100%);
			position: absolute;
			border-radius: 50%;
			animation: float 10s infinite;
		}
	
		/* 为每个气泡添加不同的位置和动画 */
		.bubble:nth-child(1) {
			top: 10%;
			left: 20%;
			animation-duration: 6s;
		}
	
		.bubble:nth-child(2) {
			top: 30%;
			left: 50%;
			animation-duration: 6s;
		}
	
		/* 更多气泡样式 */
		@keyframes float {
			0%,
			100% {
				transform: translateY(0);
			}
		
			50% {
				transform: translateY(-10px);
			}
		}
		
		#cursor {
			position: absolute;
			/* 允许点击透过元素 */
			pointer-events: none;
			/* 设置透明度 */
			opacity: 0.7;
			font-size: 30px;
		}
	</style>
</head>

<body>
	<div id="animated-border">
		<header>
			<nav>
				<ul>
					<li><a href="#home">主页</a></li>
					<li><a href="#about">筛选</a></li>
					<li><a href="#services">搜索</a></li>
					<li><a href="#contact">删除</a></li>
				</ul>
			</nav>
		</header>
		<!-- 批量展示 DriverLog 数据  -->
		<div id="data-container"></div>
		<footer>
			<p>&copy; 工单客户交互驱动执行日志  GWJ</p>
		</footer>
		<!- 添加气泡 ->
		<div class="bubbles"></div>
		<!- 添加自定义光标样式 ->
		<div id="cursor">😝</div>
		<!-- <div class="pointer"></div>-->
	</div>
	<!-- <script src="mesMoCustDriverLog.js"></script> -->
	<script src="${ctx}/ims-mes/js/streamax/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="${ctx}/ims-mes/js/mes/common/formatterJqGridCol.js"></script>
	<script type="text/javascript" src="${ctx}/ims-mes/js/mes/mesmocustdriverlog/mesMoCustDriverLog.js"></script>
	<script>/*
		function addBubble(x, y) {
			const bubble = document.createElement('div');
			bubble.classList.add('bubble');
			bubble.style.left = (x + 15) + 'px';
			bubble.style.top = (y - 60) + 'px';
			document.querySelector('.bubbles').appendChild(bubble);
						
			//动画完成后移除元素
			setTimeout(() => document.querySelector('.bubbles').removeChild(bubble), 200);
		}
		//监听鼠标移动事件并添加气泡
		document.addEventListener('mousemove', e => {
			addBubble(e.clientX, e.clientY);
		});
		
		//获取用于显示自定义光标的元素
		let cursor = document.getElementById('cursor');
		
		//监听鼠标移动事件
		document.addEventListener('mousemove', function(event) {
			//更新自定义鼠标的位置
			cursor.style.top = (event.clientY - 10) + 'px';
			cursor.style.left = (event.clientX + 12) + 'px';
		});
					*/
		/*const pointer = document.querySelector('.pointer');
					
		const onPointerMove = (e) => {
			const mouseY = e.clientY;
			const mouseX = e.clientX;
			pointer.style.transform = `translare3d(${mouseX - 10}px, ${mouseY - 100}px, 0)`;
		}
		window.addEventListener("mousemove", onPointerMove);*/
		//window.addEventListener("mousedown", onMouseClick);
	</script>
</body>
</html>
